<template xmlns:v-on="http://www.w3.org/1999/xhtml">
    <div id="app" class="home">
        <div class="homeLeft_1" v-show="hL1">
            <div class="homelogo">
                <div style="background-image: url(/static/img/首页顶部导航logo.png);">
                </div>
                <div>
                    <span style="font-size: 16px">去向无忧</span><br><span id="yao" style="font-size: 12px;">药品管理系统</span>
                </div>
            </div>
            <div class="sideNav">
                <ul>
                    <li v-for="(list,index) in lists" :class="{sadeNacClo:isSadeNacClo == index}" @click="sadeNavClick(index)">
                        <div :class="{sadeNacLi:isSadeNacLi}">
                            <div :class="list.img"></div>
                            <span>{{list.name}}</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="homeLeft_2" v-show="hL2">
            <div class="homelogo">
                <div style="background-image: url(/static/img/首页顶部导航logo.png);">
                </div>
            </div>
            <div class="sideNav">
                <ul>
                    <li v-for="(list,index) in lists" :class="{sadeNacClo_1:isSadeNacClo_1 == index}" @click="sadeNavClick_1(index)">
                        <div :class="{sadeNacLi:isSadeNacLi}">
                            <div :class="list.img_1"></div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="homeRight" :class="{changeWidth:ischangeWidth}">
            <div class="topNav">
                <div class="topNavL" @click="sideIcon">
                    <img :src="more" alt="" style="padding:25px;">
                </div>
                <div class="topNavR">
                    <div class="logQuit" style="color:#fff;" @click="logout">
                        <div>{{userState}}</div>
                        <div><img :src="logoutImg" alt=""><span>退出</span></div>
                    </div>
                </div>
            </div>
            <div class="homeMain">
                <router-view></router-view>
                <!--            加载Loading-->
                <div class="loadingBox" v-show='this.$store.state.loading'>
                    <div class="spinner">
                        <div class="spinner-container container1">
                            <div class="circle1"></div>
                            <div class="circle2"></div>
                            <div class="circle3"></div>
                            <div class="circle4"></div>
                        </div>
                        <div class="spinner-container container2">
                            <div class="circle1"></div>
                            <div class="circle2"></div>
                            <div class="circle3"></div>
                            <div class="circle4"></div>
                        </div>
                        <div class="spinner-container container3">
                            <div class="circle1"></div>
                            <div class="circle2"></div>
                            <div class="circle3"></div>
                            <div class="circle4"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--提示框-->
        <div id="tipMsg" v-show="istipMsg">
            <div class="approval-leave-bg">
                <div class="ltipBox">
                    <div style="background: #333;">
                        <p style="color:#fff;font-size: 18px;margin-left: 10px;">提示</p>
                    </div>
                    <div>
                        <p style="padding:40px 0;text-align: center;width:100%;">你确定要退出当前账号吗？</p>
                        <div class="yesNo">
                            <input type="button" value="取消" id="yes" @click="cancle">
                            <input type="button" value="确定" id="no" @click="pillSure">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {
        mapActions
    } from 'vuex';
    export default {
        name: 'home',
        data() {
            return {
                istipMsg: false,
                logoutImg: '/static/img/退出.png',
                logoutImgs: '/static/img/退出点击.png',
                more: '/static/img/更多.png',
                mores: '/static/img/更多点击.png',
                ischangeWidth: false,
                hL2: false,
                hL1: true,
                isglyphiconchevronright: true,
                isglyphicon: true,
                userState: '',
                isNavPopup: false,
                lists: [],
                isSadeNacLi: true,
                isSadeNacClo: 0,
                isSadeNacClo_1: 0
            }
        },

        created: function() {
            this.fetchDate()
            var userName = sessionStorage.getItem('userName')
            if (!userName) {
                this.$router.push({
                    path: '/login'
                })
            }
            this.userState = sessionStorage.userName
            var allArr = [{
                    name: '药品管理',
                    img: 'bigIcon bigIcon1',
                    img_1: 'bigIcon bigIcon_1',
                    push: 'pillmanage'
                },
                {
                    name: '监管码管理',
                    img: 'bigIcon bigIcon2',
                    img_1: 'bigIcon bigIcon_2',
                    push: 'codemanage',
                }, {
                    name: '库存管理',
                    img: 'bigIcon bigIcon3',
                    img_1: 'bigIcon bigIcon_3',
                    push: 'stockmanage'
                },
                {
                    name: '出库管理',
                    img: 'bigIcon bigIcon6',
                    img_1: 'bigIcon bigIcon_6',
                    push: 'leaveStorage'
                }, {
                    name: '经销商管理',
                    img: 'bigIcon bigIcon4',
                    img_1: 'bigIcon bigIcon_4',
                    push: 'dealermanage'
                }
            ]

            var oneArr = [{
                name: '系统账号管理',
                img: 'bigIcon bigIcon5',
                img_1: 'bigIcon bigIcon_5',
                push: 'systemmanage'
            }]

            var name = sessionStorage.getItem('userName')
            if (name == 'admin') {
                this.lists = oneArr
                this.$router.push({
                    path: "/home/systemmanage"
                })
            } else {
                this.lists = allArr
            }
            var userName = sessionStorage.getItem('userName')
            if (!userName) {
                this.$router.push({
                    path: "/login"
                })
            }
        },
        watch: {
            // 如果路由有变化，会再次执行该方法
            "$route": "fetchDate"
        },
        methods: {
            //  根据路径匹配标记导航
            fetchDate: function() {
                var psthStr = this.$route.path.split('/')[2]
                switch (psthStr) {
                    case 'pillmanage':
                        this.isSadeNacClo = 0
                        this.isSadeNacClo_1 = 0
                        break;
                    case 'addpill':
                        this.isSadeNacClo = 0
                        this.isSadeNacClo_1 = 0
                        break;
                    case 'editpill':
                        this.isSadeNacClo = 0
                        this.isSadeNacClo_1 = 0
                        break;
                    case 'pillrecord':
                        this.isSadeNacClo = 0
                        this.isSadeNacClo_1 = 0
                        break;
                    case 'codemanage':
                        this.isSadeNacClo = 1
                        this.isSadeNacClo_1 = 1
                        break;
                    case 'codeproduce':
                        this.isSadeNacClo = 1
                        this.isSadeNacClo_1 = 1
                        break;
                    case 'editcode':
                        this.isSadeNacClo = 1
                        this.isSadeNacClo_1 = 1
                        break;
                    case 'stockmanage':
                        this.isSadeNacClo = 2
                        this.isSadeNacClo_1 = 2
                        break;
                    case 'inStockFileUpload':
                        this.isSadeNacClo = 2
                        this.isSadeNacClo_1 = 2
                        break;
                    case 'leaveStorage':
                        this.isSadeNacClo = 3
                        this.isSadeNacClo_1 = 3
                        break;
                    case 'outStockFileUpload':
                        this.isSadeNacClo = 3
                        this.isSadeNacClo_1 = 3
                        break;
                    case 'dealermanage':
                        this.isSadeNacClo = 4
                        this.isSadeNacClo_1 = 4
                        break;
                    case 'dealermanageAdd':
                        this.isSadeNacClo = 4
                        this.isSadeNacClo_1 = 4
                        break;
                }
            },
            cancle: function() {
                this.istipMsg = false
            },
            pillSure: function() {
                this.istipMsg = false
                sessionStorage.removeItem('userName')
                this.$router.push({
                    path: '/login'
                })
            },
            // 侧栏导航切换
            sadeNavClick(index) {
                this.isSadeNacClo = index
                var pathStr = this.lists[index].push
                var url = '/home/' + pathStr
                this.$router.push({
                    path: url
                })
                this.fetchDate()
            },
            // 文字隐藏时侧栏导航切换
            sadeNavClick_1(index) {
                this.isSadeNacClo_1 = index
                var pathStr = this.lists[index].push
                var url = '/home/' + pathStr
                this.$router.push({
                    path: url
                })
            },
            sideIcon: function() {
                this.more = this.mores
                this.hL1 = !this.hL1
                this.hL2 = !this.hL2
                this.ischangeWidth = !this.ischangeWidth
            },
            logout: function() {
                this.logoutImg = this.logoutImgs
                this.istipMsg = true
            }
        }
    }

</script>

<style>
    .topNavL img {
        padding: 25px 22.5px;
        border-left: 1px solid #3CD5E0;
        border-right: 1px solid #3CD5E0;
    }
    
    .sideNav {
        margin-top: 10px;
    }
    
    .homelogo {
        box-shadow: 0 3px 7px #C0C0C0
    }
    
    .homeMain {
        padding: 0px 0 10px 0px;
    }
    
    .homeMain {
        margin-top: 10px;
        margin-left: 10px;
    }
    
    .commenNav {
        box-shadow: 0 3px 4px #D8D8D8;
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #ccc;
        box-shadow: 0 3px 7px #ccc;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
    }
    
    .home {
        width: 100%;
        display: flex;
        overflow: hidden;
    }
    
    .homeLeft_1 {
        width: 200px;
        background-color: #fff;
        box-shadow: 3px 0px 3px #C0C0C0;
    }
    
    .homeRight {
        width: calc(100% - 200px);
    }
    
    .homeLeft_1 .homelogo {
        height: 70px;
        width: 200px;
        background-color: #43dce7;
        color: #fff;
        display: flex;
        align-items: center;
    }
    
    .personageView {
        width: 100%;
        height: 70px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-bottom: 1px solid #dbdbdb;
    }
    
    .personageView>div:nth-child(1) {
        width: 47px;
        height: 47px;
        border-radius: 50%;
        overflow: hidden;
        margin-left: 20px;
    }
    
    .personageView>div:nth-child(1) img {
        width: 100%;
        height: 100%;
    }
    
    .personageView>div:nth-child(2) {
        width: 120px;
        height: 65px;
        margin-left: 10px;
    }
    
    .personageView>div:nth-child(2)>div:nth-child(1) {
        color: #555;
        font-size: 14px;
        margin-top: 11px;
        width: 100%;
        height: 20px;
        margin-left: 5px;
    }
    
    .personageView>div:nth-child(2) .statePon {
        color: #ecf0f1;
        width: 100%;
        height: 20px;
        line-height: 20px;
        color: #555;
        display: flex;
        align-items: center;
        font-size: 12px;
        margin-top: 5px;
    }
    
    .statePon div {
        margin-left: 5px;
    }
    
    .statePon div:nth-child(1) {
        width: 8px;
        height: 8px;
        border: 1px solid green;
        background-color: green;
        border-radius: 50%;
    }
    
    .statePon div:nth-child(3) {
        cursor: pointer;
    }
    
    .topNav {
        box-shadow: 0px 3px 3px #C0C0C0;
        height: 70px;
        background-color: #43dce7;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .topNavR {
        height: 70px;
        display: flex;
        align-items: center;
        overflow: hidden;
    }
    
    .emailHint {
        width: 65px;
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    
    .emailHint img {
        width: 25px;
        height: 19px;
    }
    
    .emailHint div {
        position: absolute;
        top: 7px;
        right: 7px;
        background-color: #1abb9c;
        width: 15px;
        height: 15px;
        line-height: 15px;
        text-align: center;
        padding-right: 1px;
        font-size: 12px;
        border-radius: 50%;
    }
    
    .logQuit {
        background-color: #43dce7;
        min-width: 150px;
        height: 55px;
        display: flex;
    }
    
    .logQuit>div:nth-child(1) {
        margin-left: 10px;
        display: flex;
        align-items: center;
    }
    
    .logQuit>div:nth-child(2) {
        margin-left: 30px;
        display: flex;
        align-items: center;
        margin-right: 40px;
    }
    
    .logQuit>div:nth-child(2) {
        cursor: pointer;
    }
    
    .logQuit>div:nth-child(3) {
        margin-left: 8px;
    }
    
    .backHoeme {
        cursor: pointer;
        height: 55px;
        width: 50px;
        text-align: center;
        margin-left: 20px;
        color: #ff4949;
    }
    
    .homeMain {
        overflow: hidden;
        background-color: #F1F6F6;
        height: 100%;
        border-left: 1px solid #ededed;
        position: relative;
    }
    
    .sadeNacLi {
        height: 70px;
        width: 100%;
        line-height: 70px;
        cursor: pointer;
        font-family: "Microsoft YaHei", "微软雅黑";
        border-bottom: 1px solid #DDDDDD;
        font-size: 16px;
    }
    
    .bigIcon {
        margin-left: 30px;
        margin-right: 8px;
        vertical-align: middle;
        display: inline-block;
        background: url('/static/img/icons.png') no-repeat;
        width: 24px;
        height: 33px;
    }
    
    .bigIcon1 {
        background-position: -28px -39px;
    }
    
    .bigIcon2 {
        background-position: -28px -109px;
    }
    
    .bigIcon3 {
        background-position: -28px -177px;
    }
    
    .bigIcon4 {
        background-position: -28px -249px;
    }
    
    .bigIcon5 {
        background-position: -28px -319px;
    }
    
    .bigIcon6 {
        background-position: -28px -375px;
    }
    
    .sadeNacClo {
        background-color: #ddd;
    }
    
    .sadeNacClo_1 {
        background-color: #1cafba;
    }
    
    .sadeNacClo_1>div {
        border-left: 4px solid #43E789;
    }
    /*.sadeNacLi:hover {background-color: #f9f9f9;
    }*/
    
    .navPopup {
        position: fixed;
        top: 55px;
        right: 0;
        width: 148px;
        height: 120px;
        background-color: #fff;
        z-index: 1;
        border-left: 1px solid #99afbf;
        border-right: 1px solid #99afbf;
        border-bottom: 1px solid #99afbf;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
    }
    
    .navPopup>ul>li {
        width: 100%;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #99afbf;
        text-align: center;
        font-size: 15px;
        cursor: pointer;
    }
    
    .navPopup>ul>li:nth-child(3) {
        border: 0;
    }
    
    .slide-fade-enter-active {
        transition: all 0.7s ease;
    }
    
    .slide-fade-enter,
    .slide-fade-leave-active {
        transform: translateX(30px);
        opacity: 0;
    }
    
    .homeLeft_1 .homelogo div:nth-of-type(1) {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-size: 100% 100%;
        margin: 0 20px 0 30px;
    }
    
    .homeLeft_2 .sideNav {
        margin-top: 10px;
        background: #43dce7
    }
    
    .homeLeft_2 {
        width: 70px;
        background-color: #fff;
        box-shadow: 3px 0px 3px #C0C0C0;
    }
    
    .homeLeft_2 .homelogo {
        height: 70px;
        width: 80px;
        background-color: #43dce7;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    
    .homeLeft_2 .homelogo div:nth-of-type(1) {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-size: 100% 100%;
        margin-right: 20px;
    }
    
    .homeLeft_2 .sideNav ul li {
        width: 70px;
    }
    
    .homeLeft_2 .bigIcon {
        width: 33px;
        height: 41px;
    }
    
    .bigIcon_1 {
        margin: 0;
        background-position: -149px -94px;
        margin-left: 16px;
    }
    
    .bigIcon_2 {
        margin: 0;
        background-position: -149px -164px;
        margin-left: 16px;
    }
    
    .bigIcon_3 {
        margin: 0;
        background-position: -149px -234px;
        margin-left: 16px;
    }
    
    .bigIcon_4 {
        margin: 0;
        background-position: -149px -302px;
        margin-left: 16px;
    }
    
    .bigIcon_5 {
        margin: 0;
        background-position: -149px -415px;
        margin-left: 16px;
    }
    
    .bigIcon_6 {
        margin: 0;
        background-position: -149px -365px;
        margin-left: 16px;
    }
    
    .changeWidth {
        width: calc(100% - 70px)
    }
    
    input {
        border: none;
        outline: none;
    }
    /*公用*/
    
    p {
        margin: 0;
    }
    
    .fl {
        float: left;
    }
    
    .fr {
        float: right;
    }
    
    .clear {
        clear: both
    }
    
    input::-webkit-input-placeholder {
        color: #CCCCCC!important;
        font-size: 14px
    }
    
    input:-moz-placeholder {
        color: #CCCCCC!important;
        font-size: 14px
    }
    
    input::-moz-placeholder {
        color: #CCCCCC!important;
        font-size: 14px
    }
    
    input:-ms-input-placeholder {
        color: #CCCCCC!important;
        font-size: 14px
    }
    
    ul {
        margin: 0;
        padding: 0;
    }
    
    .searchIcon {
        background: url(../../static/img/icons.png) no-repeat;
        background-position: -70px -74px;
    }
    
    .searchIconClick {
        background-position: -100px -72px;
    }
    
    .stockIcon {
        background: url(../../static/img/icons.png) no-repeat;
        background-position: -74px -141px;
    }
    
    .outStockIcon {
        background: url(../../static/img/icons.png) no-repeat;
        background-position: -28px -378px;
    }
    
    .catalogIcon {
        width: 20px;
        height: 20px;
        overflow: hidden;
        display: inline-block;
        background: url(../../static/img/icons.png) no-repeat;
        background-position: -141px -42px;
        vertical-align: middle;
    }
    
    .nullContent {
        margin-top: 302px;
        color: #DDD;
        font-size: 20px;
        text-align: center;
    }
    /*弹出框*/
    
    .tipBox {
        width: 390px!important;
        height: 200px;
        border-radius: 5px;
        box-shadow: 0 7px 12px #5F5F5F;
        position: fixed;
        z-index: 400;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
    
    .tipBox {
        animation: bounce-in .8s;
    }
    
    @keyframes bounce-in {
        0% {
            transform: translateY(-50%);
            opacity: 0;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    .tipBox div:nth-child(1) {
        height: 50px;
        line-height: 50px;
        background: #F49362;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    
    .tipBox>div:nth-child(2) {
        height: 150px;
        background: #fff;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    
    .tipBox p {
        margin: 0;
    }
    
    .ltipBox {
        width: 390px;
        height: 200px;
        border-radius: 5px;
        box-shadow: 0 7px 12px #5F5F5F;
        position: fixed;
        z-index: 400;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
    
    .ltipBox {
        animation: bounce-in .8s;
    }
    
    @keyframes bounce-in {
        0% {
            transform: translateY(-50%);
            opacity: 0;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    .ltipBox div:nth-child(1) {
        height: 50px;
        line-height: 50px;
        background: #F49362;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    
    .ltipBox>div:nth-child(2) {
        height: 150px;
        background: #fff;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    
    .ltipBox p {
        margin: 0;
    }
    
    .yesNo input {
        float: right;
        margin-right: 10px;
        overflow: hidden;
    }
    
    .yesNo input {
        width: 80px;
        height: 32px;
        line-height: 32px;
        border-radius: 5px;
        color: #fff;
    }
    
    .yesNo input:nth-child(2) {
        background: #43dce7;
        margin-right: 20px;
    }
    
    .yesNo input:nth-child(1) {
        background: #999;
    }
    
    .approval-leave-bg {
        background: rgba(0, 0, 0, 0.5);
        position: fixed;
        overflow: hidden;
        z-index: 9000;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
    }
    
    * {
        outline: none;
    }
    
    div {
        border: none
    }
    
    .userNavT>div:nth-child(1) {
        height: 32px!important;
    }
    
    .datails,
    .main {
        min-height: calc(100vh - 150px);
    }
    
    .loadingBox {
        background-color: #fff;
        position: absolute;
        top: 60px;
        left: 0px;
        height: 100%;
        width: 100%;
        z-index: 8000;
    }
    
    .spinner {
        margin: auto;
        width: 60px;
        height: 60px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
    
    .container1>div,
    .container2>div,
    .container3>div {
        width: 16px;
        height: 16px;
        background-color: #43dce7;
        border-radius: 100%;
        position: absolute;
        -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
        animation: bouncedelay 1.2s infinite ease-in-out;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }
    
    .spinner .spinner-container {
        position: absolute;
        width: 100%;
        height: 100%;
    }
    
    .container2 {
        -webkit-transform: rotateZ(45deg);
        transform: rotateZ(45deg);
    }
    
    .container3 {
        -webkit-transform: rotateZ(90deg);
        transform: rotateZ(90deg);
    }
    
    .circle1 {
        top: 0;
        left: 0;
    }
    
    .circle2 {
        top: 0;
        right: 0;
    }
    
    .circle3 {
        right: 0;
        bottom: 0;
    }
    
    .circle4 {
        left: 0;
        bottom: 0;
    }
    
    .container2 .circle1 {
        -webkit-animation-delay: -1.1s;
        -moz-animation-delay: -1.1s;
        -ms-animation-delay: -1.1s;
        -o-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }
    
    .container3 .circle1 {
        -webkit-animation-delay: -1.0s;
        -moz-animation-delay: -1.0s;
        -ms-animation-delay: -1.0s;
        -o-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }
    
    .container1 .circle2 {
        -webkit-animation-delay: -0.9s;
        -moz-animation-delay: -0.9s;
        -ms-animation-delay: -0.9s;
        -o-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }
    
    .container2 .circle2 {
        -webkit-animation-delay: -0.8s;
        -moz-animation-delay: -0.8s;
        -ms-animation-delay: -0.8s;
        -o-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }
    
    .container3 .circle2 {
        -webkit-animation-delay: -0.7s;
        -moz-animation-delay: -0.7s;
        -ms-animation-delay: -0.7s;
        -o-animation-delay: -0.7s;
        animation-delay: -0.7s;
    }
    
    .container1 .circle3 {
        -webkit-animation-delay: -0.6s;
        -moz-animation-delay: -0.6s;
        -ms-animation-delay: -0.6s;
        -o-animation-delay: -0.6s;
        animation-delay: -0.6s;
    }
    
    .container2 .circle3 {
        -webkit-animation-delay: -0.5s;
        -moz-animation-delay: -0.5s;
        -ms-animation-delay: -0.5s;
        -o-animation-delay: -0.5s;
        animation-delay: -0.5s;
    }
    
    .container3 .circle3 {
        -webkit-animation-delay: -0.4s;
        -moz-animation-delay: -0.4s;
        -ms-animation-delay: -0.4s;
        -o-animation-delay: -0.4s;
        animation-delay: -0.4s;
    }
    
    .container1 .circle4 {
        -webkit-animation-delay: -0.3s;
        -moz-animation-delay: -0.3s;
        -ms-animation-delay: -0.3s;
        -o-animation-delay: -0.3s;
        animation-delay: -0.3s;
    }
    
    .container2 .circle4 {
        -webkit-animation-delay: -0.2s;
        -moz-animation-delay: -0.2s;
        -ms-animation-delay: -0.2s;
        -o-animation-delay: -0.2s;
        animation-delay: -0.2s;
    }
    
    .container3 .circle4 {
        -webkit-animation-delay: -0.1s;
        -moz-animation-delay: -0.1s;
        -ms-animation-delay: -0.1s;
        -o-animation-delay: -0.1s;
        animation-delay: -0.1s;
    }
    
    @-webkit-keyframes bouncedelay {
        0%,
        80%,
        100% {
            transform: scale(0.0);
            -ms-transform: scale(0.0);
            -moz-transform: scale(0.0);
            -webkit-transform: scale(0.0);
            -o-transform: scale(0.0)
        }
        40% {
            transform: scale(1.0);
            -ms-transform: scale(1.0);
            -moz-transform: scale(1.0);
            -webkit-transform: scale(1.0);
            -o-transform: scale(1.0)
        }
    }
    
    @keyframes bouncedelay {
        0%,
        80%,
        100% {
            transform: scale(0.0);
            -ms-transform: scale(0.0);
            -moz-transform: scale(0.0);
            -webkit-transform: scale(0.0);
            -o-transform: scale(0.0)
        }
        40% {
            transform: scale(1.0);
            -ms-transform: scale(1.0);
            -moz-transform: scale(1.0);
            -webkit-transform: scale(1.0);
            -o-transform: scale(1.0)
        }
    }

</style>
